<!--vue模板-->
<template>
  <div class="root">
    <div>
      <span class="basic">基础信息</span>
    </div>
    <el-form
      ref="formRel"
      :model="data"
      label-width="150px"
      style="max-width: 1000px; margin-top: 20px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品类型:">
            <el-radio-group v-model="data.type">
              <el-radio :value="1">反击破产品</el-radio>
              <el-radio :value="2">鄂破产品</el-radio>
              <el-radio :value="3">圆锥类产品</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品单位:">
            <el-select v-model="data.unit" placeholder="请选择">
              <el-option
                v-for="item in unitOptions"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品编号:">
            <el-input v-model="data.code" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称:">
            <el-input v-model="data.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="封面图:">
            <el-upload
              class="avatar-uploader"
              :action="host + '/v1/upload/img'"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="轮播图:">
            <el-upload
              v-model:file-list="fileList"
              :action="host + '/v1/upload/img'"
              list-type="picture-card"
              :before-upload="beforeAvatarUpload"
              :on-success="handleBannerSuccess"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品分类:">
            <el-tree-select
              v-model="data.categoryPath"
              :data="productCategoryOptions"
              :render-after-expand="false"
              @node-click="cghcategory"
              style="width: 240px"
              :props="{
                label: 'name',
                children: 'children',
                value: 'id'
              }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号:">
            <el-select v-model="data.spec" placeholder="请选择"> </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="规格条码:">
            <el-input v-model="data.specBarCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格编码:">
            <el-input v-model="data.specCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌:">
            <el-select v-model="data.brandId" placeholder="请选择"> </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="材质:">
            <el-select v-model="data.materialId" placeholder="请选择">
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="单重:">
            <el-input v-model="data.weight" placeholder="请输入（kg）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外形尺寸:">
            <el-input v-model="data.size" placeholder="请输入(毫米)" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品图号:">
            <el-input v-model="data.productNumber" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工厂图号:">
            <el-input v-model="data.factoryNumber" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="原装图号:">
            <el-input v-model="data.originalNumber" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存:">
            <el-input v-model="data.inventory" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="价格:">
            <el-input v-model="data.price" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序:">
            <el-input v-model="data.sorts" placeholder="数字越大越靠前" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="低库存预警值:">
            <el-input v-model="data.min" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高库存预警值:">
            <el-input v-model="data.max" placeholder="数字越大越靠前" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="20">
          <el-form-item label="品牌资料：">
            <RichText ref="brandRef"></RichText>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="20">
          <el-form-item label="产品详情：">
            <RichText ref="detailRef"></RichText>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" @click="save">保存</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="info" @click="cls">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import host from "@/utils/env.js";
import { queryDict } from "@/api/dict.js";
import { queryCategory } from "@/api/productCategory.js";
import RichText from "@/components/RichText.vue";

const imageUrl = ref("");

//富文本框同名引用
const brandRef = ref(null);
const detailRef = ref(null);

//产品分类
const productCategoryOptions = ref([]);

//单位
const unitOptions = ref([]);

//轮播图
const fileList = ref([]);

//响应式对象
const data = ref({
  type: 1,
  unit: "",
  code: "",
  name: "",
  picurl: "",
  banner: [],
  categoryPath: "",
  categoryName: "",
  spec: "",
  specBarCode: "",
  specCode: "",
  brandId: 0,
  brandName: "",
  materialId: 0,
  materialName: "",
  weight: 0,
  size: 0,
  productNumber: "",
  factoryNumber: "",
  originalNumber: "",
  inventory: 0,
  price: 0,
  sorts: 0,
  min: 0,
  max: 0,
  brandDetail: "",
  detail: ""
});
//声明事件
const emits = defineEmits(["close", "refresh"]);

//查单位
async function queryUnit() {
  let res = await queryDict("unit");
  if (res.code == 200) {
    unitOptions.value = res.data;
  }
}

/**
 * 上传成功
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess = (response, uploadFile) => {
  if (response.code == 200) {
    //上传成功
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    data.value.picurl = response.data;
  }
};

//轮播图上传成功

const handleBannerSuccess = (response, uploadFile) => {
  if (response.code == 200) {
    //上传成功
    data.value.banner.push(response.data);
  }
};
//删除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //获取删除的图片路径
  let path = uploadFile.response.data;
  //如果是服务器存在的图片 发送异步请求到后台删除
  //在banner中查找
  let pos = data.value.banner.indexOf(path);
  data.value.banner.splice(pos, 1);
};

/**
 * 文件上传前的限制
 * @param rawFile
 */
const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("请上传jpg、png格式的文件");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片不能超过2MB!");
    return false;
  }
  return true;
};

//保存
async function save() {
  //获取品牌资料的内容
  data.value.brandDetail = brandRef.value.valueHtml;
  //获取详情
  data.value.detail = detailRef.value.valueHtml;
  console.log("data>>>", data.value);
  return;
  //新增
  let res = null; //await saveCustomer(data.value);
  console.log(data.value);

  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //通知父组件刷新数据
    emits("refresh");
    cls();
  }
}

async function queryProductCategory() {
  let res = await queryCategory();
  if (res.code == 200) {
    productCategoryOptions.value = res.data;
  }
  console.log(" productCategoryOptions.value>>>", productCategoryOptions.value);
}

//方法
function cls() {
  //通知父组件  我要关闭了
  emits("close");
}
//产品分类
function cghcategory(v) {
  data.value.categoryPath = v.id;
  data.value.categoryName = v.name;
  console.log("v>>>", data.value);
}

onBeforeMount(() => {
  queryUnit();
  queryProductCategory();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;

  border-style: none;
  border-left: #0054a6 solid 4px;
  padding-left: 10px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}

:deep(.el-upload) {
  width: 120px;
  height: 120px;
}
</style>
